<script lang="ts" setup>
import tzLoading from '@/components/tz-loading.vue'
import CountTo from '@/components/CountTo.vue'

const tableData = ref([])

const loading = ref(true)
setTimeout(() => {
  loading.value = false
}, 500)


// search
const searchForm = reactive({
  time: [],
  equipmentid: '',
  projectid: ''
})

const optionloading = ref(true)
const projectoptions = ref([])
const equipmentoptions = ref([])


// 获取项目列表
const getprojectData = () => {
  tProjectControllerSellist().then(res => {
    projectoptions.value = res.result.map(v => {
      return {
        value: v.id,
        label: v.name,
      }
    })
  })
}

getprojectData()

// 获取设备列表
const getequipmentData = () => {
  optionloading.value = true
  searchForm.equipmentid = ''
  tProjectControllerSelequipmentbyid(searchForm.projectid).then(res => {
    equipmentoptions.value = res.result.map(v => {
      return {
        value: v.id,
        label: v.equipmentid,
      }
    })
  }).finally(() => {
    optionloading.value = false
  })
}



const filterFn = (obj, row) => {
  let item = obj.find(v => v.value === row)
  // console.log(item)
  // console.log(obj)
  console.log(row)
  return item ? item.label : ''
}

// 分页
const pageSize4 = ref(10)
const currentPage4 = ref(1)
const size = ref<ComponentSize>('default')
const disabled = ref(false)
const total = ref(0)
const background = ref(false)

const handleSizeChange = (val: number) => {
  getData()
}
const handleCurrentChange = (val: number) => {
  getData()
}


const errorDetail = ref('')
const detailLoading = ref(true)
const dialogVisible = ref(false)
const openDialog = (row) => {
  detailLoading.value = true
  dialogVisible.value = true
  TAlarmIntimeControllerSelbyid(row.id).then(res => {
    errorDetail.value = res.result
  }).finally(() => detailLoading.value = false)
}



const dialogVisible1 = ref(false)
const openDialog1 = (row) => {
  ruleForm.headperson = row.headperson
  ruleForm.zdsm = row.zdsm
  ruleForm.id = row.id
  dialogVisible1.value = true
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  headperson: '', //负责人名称
  id: '', //告警历史id
  zdsm: '',  //诊断说明
})
const closeFn = () => {
  Object.keys(ruleForm).forEach(v => {
    ruleForm[v] = ''
  })
}

const submitForm = () => {
  dialogVisible1.value = false
  TAlarmIntimeControllerInsertwhjl(ruleForm).then(res => {
    getData()
    toast('更新成功')
  })
}


const userStore = useUserStore()


const getData = () => {
  loading.value = true
  let Q = {
    "csid": userStore.userInfo.csid,
    "endtime": searchForm.time.length > 0 ? searchForm.time[1] : '',
    "equipmentid": searchForm.equipmentid,
    "index": currentPage4.value,
    "projectid": searchForm.projectid,
    "size": pageSize4.value,
    "starttime": searchForm.time.length > 0 ? searchForm.time[0] : '',
  }
  TASelTalarmhistorybypage(Q).then(res => {
    total.value = res.page.total
    tableData.value = res.result
  }).finally(() => loading.value = false)
}

getData()


const allNumber = ref(null)
const getErrorAll = () => {
  TAlarmIntimeControllerSelalarmtj().then(res => {
    allNumber.value = res.result

  })
}
getErrorAll()
</script>

<template>
  <tzLoading v-if="loading"></tzLoading>

  <div class="flex flex-col flex-1 overflow-auto" v-else>
    <div class="h-[13%]"></div>


    <div class="mx-[20px] mb-[40px] h-[13%] flex gap-[20px] px-[30px] py-[20px]"
      style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);border-radius: 28px 28px 28px 28px;">

      <div class="w-[100%] flex flex-col">
        <div class="flex gap-[20px] h-[100%] ">

          <div class=" flex-1 rounded-[30px] bg-green-400  px-[30px] flex flex-col justify-around">
            <div class="mb-[10px] text-white">当天报警数</div>
            <div>
              <CountTo :value="allNumber?.todayalarm"></CountTo>
            </div>
          </div>





          <div class="bg-yellow-600 flex-1  rounded-[30px] px-[30px] flex flex-col justify-around">
            <div class="mb-[10px] text-white">待处理记录</div>
            <div>
              <CountTo :value="allNumber?.todaydaialarm"></CountTo>
            </div>
          </div>


          <div class=" flex-1 rounded-[30px] bg-green-700  px-[30px] flex flex-col justify-around">
            <div class="mb-[10px] text-white">本月异常总数</div>
            <div>
              <CountTo :value="allNumber?.monthalarm"></CountTo>
            </div>
          </div>


          <div class=" flex-1 rounded-[30px] bg-green-900  px-[30px] flex flex-col justify-around">
            <div class="mb-[10px] text-white">已处理数量</div>
            <div>
              <CountTo :value="allNumber?.monthyclalarm"></CountTo>
            </div>
          </div>



        </div>

      </div>




    </div>


    <div class="px-[25px] flex gap-[20px]">


      <el-form-item label="日期">
        <el-date-picker v-model="searchForm.time" type="daterange" range-separator="To" start-placeholder="Start date"
          end-placeholder="End date" placeholder="请选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
      </el-form-item>

      <el-form-item label="项目">
        <el-select v-model="searchForm.projectid" placeholder="请选择项目" @change="getequipmentData()">
          <el-option v-for="item in projectoptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="设备">
        <el-select v-model="searchForm.equipmentid" placeholder="请选择设备" style="">
          <el-option v-for="item in equipmentoptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-button @click="getData" class="w-[90px] ml-auto  flex justify-center items-center" color="#0c9bc8">
        <span class="text-[16px] font-medium text-white">查询</span>
      </el-button>

    </div>
    <div class="flex-1 p-[25px] overflow-auto">
      <el-table :data="tableData" class="" style="width: 100%;height: 100%;">


        <el-table-column prop="projectName" label="项目名称" />
        <el-table-column prop="name" label="设备名称" />
        <el-table-column prop="alarmlevel" label="告警等级" />
        <el-table-column prop="alarmname" label="告警名称"></el-table-column>

        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="headperson" label="负责人名称" />
        <el-table-column prop="phone" label="联系方式 " />
        <el-table-column prop="reason" label="报警原因 " />
        <el-table-column prop="xtfzrname" label="关联报警人 " />
        <el-table-column prop="zd" label="报警字段 " />
        <el-table-column prop="zdsm" label="诊断说明 " />



        <el-table-column prop="createTime" label="创建时间" />





        <el-table-column label="处理状态">
          <template #default="scope">
            <div :class="scope.row.type == '1' ? 'text-green-800' : 'text-red-700'">
              {{ scope.row.type == '1' ? '已处理' : '未处理' }}
            </div>
          </template>
        </el-table-column>


        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" type="warning" @click="openDialog1(scope.row)">
              <span>日志</span>
            </el-button>

            <el-button size="small" type="danger" @click="openDialog(scope.row)">
              <span class="text-white">详情</span>
            </el-button>



          </template>
        </el-table-column>


      </el-table>
    </div>
    <div class="flex justify-center mb-[20px]">
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 50, 100]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>




    <el-dialog v-model="dialogVisible" title="报警详情" width="500px" top="20vh">
      <el-row class=" flex-1 xwmd:(mt-[30px]) xwlg:(mt-[20px])" :gutter="20" v-if="errorDetail.projectName">

        <el-col :span="12" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">项目名称:{{ errorDetail.projectName
        }}</el-col>
        <el-col :span="12" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">设备名称:{{ errorDetail.name }}</el-col>
        <el-col :span="12" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">告警等级:{{ errorDetail.alarmlevel
        }}</el-col>
        <el-col :span="12" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">告警名称:{{ errorDetail.alarmname
        }}</el-col>
        <el-col :span="24" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">负责人名称:{{ errorDetail.headperson
        }}</el-col>
        <el-col :span="24" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">email:{{ errorDetail.email }}</el-col>
        <el-col :span="24" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">处理状态:{{ errorDetail.type
          == 1 ? '已处理' : '未处理' }}</el-col>
        <el-col :span="24" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">报警原因:{{ errorDetail.reason }}</el-col>
        <el-col :span="24" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">关联报警人:{{ errorDetail.xtfzrname
        }}</el-col>
        <el-col :span="24" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">报警字段:{{ errorDetail.zd }}</el-col>
        <el-col :span="24" class="mb-[20px] xwmd:(text-[24px]) xwlg:(text-[18px])">诊断说明:{{ errorDetail.zdsm }}</el-col>
      </el-row>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            <span class="text-white">确定</span>
          </el-button>
        </div>
      </template>
    </el-dialog>





    <el-dialog v-model="dialogVisible1" title="日志" width="300px" top="20vh" @close="closeFn">
      <div class="flex justify-center gap-[30px]">
        <div class="flex-1 flex flex-col items-center">


          <el-form ref="ruleFormRef" :model="ruleForm" label-width="auto" style="width: 100%;"
            class="demo-ruleForm flex-1" status-icon>


            <el-form-item label="负责人名称" prop="headperson">
              <el-input v-model="ruleForm.headperson" />
            </el-form-item>

            <el-form-item label="诊断说明" prop="zdsm">
              <el-input v-model="ruleForm.zdsm" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
            </el-form-item>

          </el-form>




        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="submitForm()">
            <span class="text-white">确定</span>
          </el-button>
        </div>
      </template>
    </el-dialog>




  </div>
</template>

<style scoped>
:deep(.el-table__row) {
  background-color: #f3fdf1;
}

:deep(th>.el-table__cell) {
  background-color: #0f914c;
}

:deep(.el-table th.el-table__cell) {
  background-color: #0e904c;
}


:deep(.el-table th.el-table__cell .cell) {
  color: #fff;
}
</style>
